<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.js" ></script>

</head>
<body>

<div id="header">
    <div id="content">
        <button id="submitBtn">Submit Button</button>
    </div>
</div>

<script type="text/javascript">

    //event bubbling

    $(function (){

        $('body').click(function(){
           console.log('body click handler is called');
        });

        $('#header').click(function(){
            console.log('header click handler is called');
        });

        $('#content').click(function(){
            console.log('content click handler is called');
        });

        $('#submitBtn').click(function(){
            console.log('submit button handler is called');
        });
    });
</script>
</body>
</html>